<template>
  <div class="home">
    <div class="home-aside"
         :style="{ width: collapsed ? '80px' : '240px' }">
      <div class="home-aside-logo">
        <span class="home-aside-logo-font">
          <img src="../assets/img/logo.png"
               alt="Logo"
               class="home-aside-logo-img"
               :class="!collapsed ? 'home-aside-logo-img-collapse' : ''">
          <span v-show="!collapsed"
                class="home-aside-logo-title">
            <span>维修宝</span>
          </span>
        </span>
      </div>
      <div class="home-aside-admin">
        <a-tooltip placement="right">
          <div slot="title">
            <div style="cursor: pointer;line-height: 32px;"
                 v-for="(item, i) in adminRouteList"
                 @click="adminInfoClick" 
                 :key="i">
              <div :key="item.key">
                <a-icon :type="item.iconClass" />
                {{ item.name }}
              </div>
            </div>
          </div>
<!--          <img src="../assets/img/avatar.jpg"-->
<!--               style="width: 40px;height: 40px;border-radius: 50%;margin-left: 20px;"-->
<!--               alt="avatar"-->
<!--               v-show="collapsed">-->
          <a-avatar v-show="collapsed"
                    class="avatar">
            {{ $store.state.adminInfo.adminName.substring(1, -1) }}
          </a-avatar>
        </a-tooltip>
        <a-dropdown :trigger="['click']"
                    v-show="!collapsed">
          <div class="home-aside-admin-inner">
            <a-avatar class="avatar" style="margin-left: 6px;">
              {{ $store.state.adminInfo.adminName.substring(1, -1) }}
            </a-avatar>
            <div class="home-aside-admin-inner-info">
              <div class="home-aside-admin-inner-info-common home-aside-admin-inner-info-top">{{ admin.name }}</div>
              <div class="home-aside-admin-inner-info-common home-aside-admin-inner-info-bottom">
                {{ admin.level === 1 ? '高级管理员' : admin.level === 2 ? '中级管理员' : '初级管理员' }}
              </div>
            </div>
            <a-icon type="down"/>
          </div>
          <a-menu slot="overlay"
                  @click="adminInfoClick">
            <a-menu-item v-for="(item) in adminRouteList" :key="item.key">
              <a-icon :type="item.iconClass"/>
              {{ item.name }}
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
      <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'"
              @click="toggleCollapsed" class="home-aside-toggle-collapse"/>
      <a-menu 
        :selected-keys="$store.state.currentRoute"
        mode="inline"
        theme="light"
        :inline-collapsed="collapsed" 
        @click="changeRoute"
      >
        <template v-for="(item, i) in menuList">
          <a-sub-menu v-if="item.children && item.children.length !== 0" :key="i">
            <span slot="title"><a-icon :type="item.iconClass" /><span>{{ item.name }}</span></span>
            <a-menu-item v-for="(itemChildren) in item.children" :key="itemChildren.currentRoute">
              {{ itemChildren.name }}
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item :key="item.currentRoute" v-else>
            <a-icon :type="item.iconClass" />
            <span>{{item.name}}</span>
          </a-menu-item>
        </template>
      </a-menu>
      <div>
        <a-modal
            title="修改密码"
            width="420px"
            :dialog-style="{ top: '120px' }"
            :visible="changePwdVisible"
            :maskClosable="false"
            :closable="false"
            :footer="null"
        >
          <a-form-model ref="pwdForm" :layout="'vertical'" :model="changePwdInfo" :rules="rules">
            <a-form-model-item label="请输入原密码" prop="oldPwd">
              <a-input-password placeholder="请输入原密码" v-model="changePwdInfo.oldPwd"/>
            </a-form-model-item>
            <a-form-model-item label="请输入新密码" prop="newPwd">
              <a-input-password placeholder="请输入新密码"  v-model="changePwdInfo.newPwd"/>
            </a-form-model-item>
            <a-form-model-item label="请确认新密码" prop="confirmPwd">
              <a-input-password placeholder="请确认新密码" v-model="changePwdInfo.confirmPwd"/>
            </a-form-model-item>
            <a-form-model-item style="margin-bottom: 0;text-align: center;">
              <template>
                <a-button type="default" style="margin-right: 20px;" @click="clearPwd">取消</a-button>
                <a-button type="primary" @click="updatePwd">确认</a-button>
              </template>
            </a-form-model-item>
          </a-form-model>
        </a-modal>
      </div>
    </div>
    <div class="home-main"
         :style="{ width: collapsed ? 'calc(100% - 80px)' : 'calc(100% - 240px)' }">
      <div class="home-main-top">
        <div style="width: 250px;display: inline-block;">
          <span class="home-main-top-welcome">Welcome, {{ admin.name }}</span><br>
          <span>{{ admin.level === 1 ? '高级管理员' : admin.level === 2 ? '中级管理员' : '初级管理员' }}</span>
        </div>
        <div style="display: inline-block;float:right;">
          <a-select placholder="快捷跳转"
                    class="home-main-top-input"
                    @change="onSearch">
            <a-select-option v-for="(item, i) in globalSearchData"
                             :value="item.value"
                             :key="i">
              {{item.label}}
            </a-select-option>
          </a-select>
          <a-badge :count="messageContent.length"
                   class="home-main-top-badge">
            <span class="home-main-top-badge-message"
                  @click="showMessageDetail">
              <a-icon type="mail"/>
            </span>
          </a-badge>
          <a-badge :count="alertContent.length"
                   class="home-main-top-badge">
            <span class="home-main-top-badge-message"
                  @click="showAlertDetail">
              <a-icon type="alert"/>
            </span>
          </a-badge>
        </div>
        <div class="home-main-detail"
             :style="{ right: detailInfo === 'message' ? '80px' : '30px' }"
             v-show="isDetailShow">
          <div class="home-main-detail-title">
            {{ detailInfo === 'message' ? '消息' : '通知' }}
            <a-icon type="close-circle"
                    style="float:right;margin-top: 4px;"
                    @click="isDetailShow = false"/>
          </div>
          <div style="max-height: 280px;overflow: auto;">
            <div v-for="(item, i) in messageContent"
                 :key="i"
                 v-show="detailInfo === 'message'"
                 style="padding: 6px 2px;">
              <a-avatar :icon="item.avatar"
                        shape="square"
                        style="margin: 4px;vertical-align: bottom;"></a-avatar>
              <div class="home-main-detail-main-username">{{ item.fromName }}</div>
              <div class="home-main-detail-main-content">{{ item.content }}</div>
            </div>
          </div>
          <div v-for="(item, i) in alertContent"
               :key="i"
               v-show="detailInfo === 'alert' && alertContent.length !== 0">
          </div>
          <div
              v-if="(messageContent.length === 0 && detailInfo === 'message') || (alertContent.length === 0 && detailInfo === 'alert')">
            <a-empty/>
          </div>
          <div v-else
               class="home-main-detail-view-all">
            <span>查看全部</span>
          </div>
        </div>
      </div>
      <div class="home-main-bottom">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import axios from 'axios';
import { changePwd } from '@/api/api';

export default {
  name: "HomeTest",
  computed: {
    ...mapState(['adminInfo'])
  },
  data() {
    return {
      collapsed: false,
      detailInfo: 'message',
      isDetailShow: false,
      changePwdVisible: false,
      menuList: [
        {currentRoute: '/home/index', iconClass: 'pie-chart', name: '数据总览'},
        {currentRoute: '/home/order-list', iconClass: 'unordered-list', name: '订单列表'},
        {currentRoute: '/home/order', iconClass: 'file-text', name: '订单管理',
          children: [
            {currentRoute: '/home/order/finish', iconClass: 'file-text', name: '已发布订单'},
            {currentRoute: '/home/order/rollback', iconClass: 'file-text', name: '已退回订单'},
          ]
        },
        {currentRoute: '/home/user-list', iconClass: 'user', name: '用户管理'},
        {currentRoute: '/home/worker-list', iconClass: 'team', name: '人员管理'},
        {currentRoute: '/home/money-list', iconClass: 'money-collect', name: '提成管理'},
        // {currentRoute: '/home/chart-view', iconClass: 'dashboard', name: '图表查看'},
      ],
      adminRouteList: [
        {key: '/home/my-host', iconClass: 'home', name: '我的主页'},
        {key: 'change-pwd', iconClass: 'setting', name: '修改密码'},
        {key: 'log-out', iconClass: 'logout', name: '退出登录'},
      ],
      admin: {
        name: 'administrator',
        level: '高级管理员',
      },
      messageContent: [],
      alertContent: [],
      changePwdInfo: {
        oldPwd: '',
        newPwd: '',
        confirmPwd: ''
      },
      rules: {
        oldPwd: [{required: true, message: '请输入原密码!', trigger: 'blur'}],
        newPwd: [{required: true, message: '请输入新密码!', trigger: 'blur'}],
        confirmPwd: [
          {
            required: true, 
            trigger: 'blur',
            validator: (rule, value, callback) => {
              if (value === '') return callback('请输入确认密码');
              if (value !== this.changePwdInfo.newPwd) return callback('两次输入的密码不一致');
              callback();
            }
          }
        ],
      },
      globalSearchData: [],
    }
  },
  methods: {
    /**
     * 侧边栏收缩
     */
    toggleCollapsed() {
      this.collapsed = !this.collapsed;
    },
    /**
     * 修改路由跳转页面
     */
    changeRoute(item) {
      this.$router.push(item.key);
      this.$store.commit('setCurRouter', item.key);
    },
    /**
     * 全局搜索
     */
    onSearch(value) {
      this.globalSearchData.forEach(singleData => {
        if (singleData.value === value) {
          this.$router.push(singleData.path);
          // this.$store.state.currentRoute = this.$route.fullPath;
        }
      })
    },
    /**
     * 获取全局搜索内容
     */
    getGlobalSearch() {
      // axios.get(`http://localhost:8080/js/homesearch.json`)
      //     .then(res => {
      //       if (res.data.ret === 0) {
      //         this.globalSearchData = res.data.data;
      //       }else {
      //         this.$message.error(`Error`);
      //       }
      //     })
      //     .catch(err => {
      //       this.$message.error(err);
      //     })
    },
    /**
     * 展示消息面版
     */
    showMessageDetail() {
      this.detailInfo = 'message';
      this.isDetailShow = true;
    },
    /**
     * 展示警示面板
     */
    showAlertDetail() {
      this.detailInfo = 'alert';
      this.isDetailShow = true;
    },
    /**
     * 展开管理员信息面板
     */
    adminInfoClick(e) {
      const symbol = e.key;
      switch (symbol) {
        case '/home/my-host':
          this.$router.push('/home/my-host');
          return;
        case 'change-pwd':
          this.changePwdVisible = true;
          return;
        case 'log-out':
          this.$router.replace('/login');
          return;
      }
    },
    /**
     * 更新密码
     */
    updatePwd() {
      this.$refs['pwdForm'].validate((valid) => {
        if (valid) {
          console.log(this.changePwdInfo);
          let options = {
            ...this.changePwdInfo
          };
          changePwd(options)
            .then(res => {
              this.$message.success('修改成功，请重新登陆系统');
              this.$router.replace('/login');
            })
            .catch(err => {
              this.$message.error(`修改密码失败，${err.data}`);
            })
        }else {
          return console.log('error submit');
        }
      });
    },
    /**
     * 清除修改密码内容
     */
    clearPwd() {
      this.changePwdVisible = false;
      this.$refs['pwdForm'].resetFields();
    },
    /**
     * 从登录中获取管理员信息
     */
    getAdminInfo() {
      this.admin = {
        name: this.$store.state.adminInfo.adminName,
        level: this.$store.state.adminInfo.level,
      }
    },
  },
  mounted() {
    this.getAdminInfo();
    this.getGlobalSearch();
  }
}
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;

  .home-aside {
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: relative;

    .home-aside-logo {
      margin-top: 35px;
      margin-bottom: 10px;
      text-align: center;

      .home-aside-logo-img {
        width: 40px;
        height: 40px;
      }

      .home-aside-logo-img-collapse {
        float: left;
        margin-left: 30px;
        margin-top: 8px;
      }

      .home-aside-logo-font {
        font-size: 34px;
        color: rgb(39, 159, 222);
        font-weight: 600;

        .home-aside-logo-title {
          margin-left: -40px;
          background-clip: text;
          background-image: linear-gradient(to right, #1296DB , yellow);
          color: transparent;
        }
      }
    }

    .home-aside-admin {
      margin-bottom: 15px;

      .home-aside-admin-inner {
        width: 70%;
        margin-left: 15%;
        height: 52px;
        background-color: rgb(237, 244, 254);
        border-radius: 52px;
      }

      .home-aside-admin-inner-info {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        width: calc(100% - 70px);

        .home-aside-admin-inner-info-common {
          text-indent: 4px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .home-aside-admin-inner-info-top {
          height: 28px;
          font-weight: 600;
          line-height: 28px;
          font-size: 18px;
        }

        .home-aside-admin-inner-info-bottom {
          height: 18px;
          line-height: 18px;
          font-size: 12px;
        }
      }
    }

    .home-aside-toggle-collapse {
      font-size: 16px;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
      background-color: rgb(242, 247, 253);
      border-left: 3px solid rgb(42, 94, 253);
      margin-left: 4px;
      width: calc(100% - 4px);
    }

    .ant-menu-inline .ant-menu-item::after {
      border-right: 0;
    }

    .ant-menu-inline {
      border-right: 0;
    }

    .ant-menu-vertical {
      border-right: 0;
    }

    .ant-menu-item {
      height: 46px;
      line-height: 46px;
    }

    .ant-form-item {
      margin-bottom: 0 !important;
    }
  }

  .home-main {
    height: 100%;
    background-color: rgb(242, 247, 253);
    display: inline-block;
    box-sizing: border-box;

    .home-main-top {
      width: 100%;
      height: 80px;
      padding: 20px 20px 0 20px;
      box-sizing: border-box;
      font-size: 14px;
      color: #888888;

      .home-main-top-welcome {
        font-size: 20px;
        font-weight: 600;
        color: #000000;
      }

      .home-main-top-input {
        margin-top: 10px;
        width: 260px;
        vertical-align: top;
      }

      .home-main-top-badge {
        margin: 10px 10px 0;
      }

      .home-main-top-badge-message {
        width: 32px;
        height: 32px;
        border-radius: 4px;
        background: #fff;
        display: inline-block;
        text-align: center;
        line-height: 32px;
        font-size: 16px;
        cursor: pointer;
      }
    }

    .home-main-bottom {
      width: 100%;
      height: calc(100% - 80px);
      padding: 20px;
      box-sizing: border-box;
      overflow: auto;
    }

    .home-main-detail {
      width: 280px;
      padding: 5px 10px;
      box-sizing: border-box;
      position: absolute;
      background-color: #ffffff;
      border-radius: 4px;
      z-index: 99;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

      .home-main-detail-title {
        text-align: center;
        letter-spacing: 4px;
        font-size: 16px;
        font-weight: 600;
        border-bottom: 2px solid #dddddd;
        height: 30px;
        line-height: 26px;
      }

      .home-main-detail-view-all {
        font-size: 13px;
        text-align: center;
        color: #aaaaaa;
        cursor: pointer;
        height: 28px;
        line-height: 28px;
        border-top: 2px solid #dddddd;

        span:hover {
          color: #666666;
        }
      }

      .home-main-detail-main-username {
        display: inline-block;
        width: calc(100% - 41px);
        font-size: 18px;
        height: 40px;
        line-height: 40px;
        text-indent: 4px;
      }

      .home-main-detail-main-content {
        padding: 2px;
        color: #444444;
        font-size: 12px;
      }
    }
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-left: 20px;
    line-height: 36px;
    font-size: 20px;
    background-color: #87d068;
  }
}
</style>